<%--
  Created by IntelliJ IDEA.
  User: 郑川东
  Date: 2021/8/3
  Time: 9:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<table id="productManagement" lay-filter="productManagement"></table>

<%--//头部工具栏事件--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addProduct">添加</button>
<%--        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>--%>
<%--        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>--%>
    </div>
</script>

<%--侧工具栏事件--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="productEdit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
    {{#  } }}
</script>

<script>
    layui.use('table', function(){
        var table = layui.table;
        var $ = layui.$;

        table.render({
            elem: '#productManagement'
            ,url:'productQueryList'
            ,toolbar: '#toolbarDemo'
            ,cols: [[
                {field:'productId', width:120, title: 'ID', sort: true}
                ,{field:'productName', width:120, title: '产品名称'}
                ,{field:'productType', width:120, title: '产品类型'}
                ,{field:'productPurchaser', width:120, title: '订购人/集团'}
                ,{fixed: 'right', width:210, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
            ,page: true
        });
        //头部工具栏触发事件
        table.on('toolbar(productManagement)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'addProduct':
                    $.ajax({
                        url: "productEdit",
                        type: "get",
                        success: function (data) {
                            layer.open({
                                type: 1,
                                title: "添加产品信息",
                                content: data,
                                area: ['600px', '400px']
                            });
                        }
                    })
                    break;
                // case 'delete':
                //     layer.msg('删除');
                //     break;
                // case 'update':
                //     layer.msg('编辑');
                //     break;
            };
        });
        //侧面工具条触发事件
        table.on('tool(productManagement)', function(obj){ //注：tool 是工具条事件名，productManagement 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                // alert(data.productId);
                $.ajax({
                    url:"detail"
                    ,type:"get"
                    ,data: "productid=" + data.productId//这里传出的productId值是tbdepositorydata的主键id（仓库存储产品记录表中的主键id，一个主键id对应唯一的一件产品）
                    ,success:function (data){
                        layer.open({
                            type: 1
                            ,title:'查看产品详细信息页面'
                            ,content: data //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                            ,area: ['800px', '400px']
                        });
                    }
                })
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    // alert("删除成功")
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'productEdit'){ //编辑
                // alert(data.productId);
                //do something
                $.ajax({
                    url: "productEdit",
                    type: "get",
                    data: "productId=" + data.productId,//这里传出的productid值是tbdepositorydata的主键id（仓库存储产品记录表中的主键id，一个主键id对应唯一的一件产品）
                    success: function (data) {
                        layer.open({
                            type: 1,
                            title: "编辑产品信息",
                            content: data,
                            area: ['600px', '400px']
                        });
                    }
                })
                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            } else if(layEvent === 'addProduct'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
                alert("头部工具栏设置成功");
            }
        });
    });

</script>